<template>
  <div class="aaa">

  <el-card class="service-provider-card" style="max-width: 50%">
    <template #header>
      <div class="card-header">
        <h3>基本信息</h3>
      </div>
    </template>
    <div class="card-body">
      <p><strong style="color: red;">真实姓名：</strong>{{ provider.name }}</p>
      <p><strong style="color: red;">登录账号：</strong>{{ provider.phone }}</p>
      <p><strong style="color: red;">服务分类：</strong>{{ provider.serveTypeName }}</p>
      <p><strong style="color: red;">服务城市：</strong>{{ provider.cityName }}</p>
      <p><strong style="color: red;">服务地址：</strong>{{ provider.intentionScope }}</p>
      <p><strong style="color: red;">接单状态：</strong>{{ provider.canPickUp === 0 ? '接单中' : '休息中' }}</p>
      <p><strong style="color: red;">综合评分：</strong>{{ provider.score }}</p>
      <p><strong style="color: red;">账号状态：</strong>{{ provider.status === 0 ? '正常' : '冻结'}}</p>
      <p><strong style="color: red;">认证时间：</strong>{{ provider.certificationTime }}</p>
    </div>
  </el-card>

  <el-card class="service-provider-card" style="max-width: 50%">
    <template #header>
      <div class="card-header">
        <h3>认证信息</h3>
      </div>
      <div>
        <p><strong style="color: red;">真实姓名：</strong>{{ rzList.name }}</p>
        <p><strong style="color: red;">身份证号：</strong>{{ rzList.idCardNo }}</p>
        <p><strong style="color: red;">身份证人像照片：</strong>
          <el-avatar shape="square" :size="100" :fit="fit" :src=rzList.frontImg />
        </p>
        <p><strong style="color: red;">身份证国徽照片：</strong>
          <el-avatar shape="square" :size="100" :fit="fit" :src= rzList.backImg  />
        </p>
        <p><strong style="color: red;">证件资料：</strong>
          <el-avatar shape="square" :size="100" :fit="fit" :src=rzList.certificationMaterial />
        </p>
      </div>
    </template>
    <div >

    </div>
  </el-card>

    <el-card style="max-width: 50%">
      <template #header>
        <div>
          <h3>账户信息</h3>
        </div>
        <div>
          <p><strong style="color: red;">户名：</strong>{{ bankLists.name }}</p>
          <p><strong style="color: red;">银行：</strong>{{ bankLists.bankName }}</p>
          <p><strong style="color: red;">开户行：</strong>{{ bankLists.kaihuhang }}</p>
          <p><strong style="color: red;">网点：</strong>{{ bankLists.branch }}</p>
          <p><strong style="color: red;">银行账号：</strong>{{ bankLists.account }}</p>
          <p><strong style="color: red;">开户证明：</strong>
            <el-avatar shape="square" :size="100" :fit="fit" :src=bankLists.accountCertification />
          </p>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { basic } from '@/api/serveProvider/serveProvider';
import {useRoute} from "vue-router";
import {rzInfo,bankInfo} from '/@/api/serveProvider/renzheng'
import {ElMessage} from "element-plus";

const route= useRoute();
const id = route.query.id;
console.log(id)
const provider = ref({});
function  showBasic(){
  basic(id).then(res => {
    provider.value = res.data.data
  })
}
showBasic()

const  rzList=ref({})
function  showInfo(){
  rzInfo(id).then(res => {
    rzList.value = res.data.data
  })
}
showInfo()


const bankLists=ref({
  name:'',
  bankName:'',
  kaihuhang:'',
  branch:'',
  account:'',
  accountCertification:''
})
function  showBank(){
  bankInfo(id).then(res => {
    console.log(res)
    if (res.data.code == 200){
      bankLists.value = res.data.data
    }else{
      ElMessage.error(res.data.errorMessage)
    }
  })
}
showBank()
</script>

<style scoped>
.service-provider-card {
  margin: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}
.provider-image {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}
.aaa{

}
</style>
